<template>
	<view class="">
		<view class="txl-step-bar" v-if="stepBar.length>0">
			<view v-for="(item, i) in stepBar" :key="i" :class="item.id ==activeId?'active':''">
				<uni-icons v-if="item.id!=-1" type="right" size="20rpx" :color="item.id ==activeId?'#555':'#02A7F0'"></uni-icons>
				<text :class="['text', {'lastText': item.id == activeId}, {activeText: item.id != activeId}]" @click="preStep(item.id)">{{item.name}}</text>
			</view>
		</view>
		<view class="group-info" v-for="(item, i) in chatGroup" :key="i" @click="radioChange(item, item.type, item.id)">
            <!-- <radio class="radio" v-if="type==2" :value="org.id+''" :checked="chatGroupIds.indexOf(org.id)!=-1"></radio> -->
			<uni-icons v-if="chatGroupIds.indexOf(item.id)!=-1" type="checkbox-filled" color="#02A7F0" size="40rpx"></uni-icons>
			<uni-icons v-else type="circle" size="40rpx"></uni-icons>
			<image class="logo" :src="`/static/txl/qlx${item.type>3?3:item.type}.png`" mode="aspectFill"></image>
			<text class="name">{{item.name}}</text>
			<text :class="['tag', 'tag-bg'+item.type]">{{item.type==1?'校级':item.type==2?'年级':'班级'}}</text>
		</view>
        <view class="no-group" v-if="chatGroup.length==0">
            暂无群聊
        </view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			activeId: -2,
            chatGroupIds: [],
			runChatGroup: [],
			chatGroupList: []
		}
	},
	props: {
		chatGroup: {
			type: Array,
			default: ()=>[]
		},
		stepBar: {
			type: Array,
			default: ()=>[]
		},
	},
	mounted() {
		this.infoData()
	},
	methods: {
		infoData(){
		            
			this.stepBar.splice(1);
 
			

			let item = {name: '我管理的群组', id: -2}
			this.stepBar.push(item)

		},
		preStep(id){
			if(id == -1){
				this.$emit('selectGroup', id)
				return
			}
			if(this.activeId == id) return;
			this.activeId = id;
			let type = this.stepBar.findIndex(item => item.id==id);
			type = type

			this.stepBar.splice(type+1)
			if(type==1){
				
			}else if(type == 2){
				
			}else if(type == 3){
				
			}
		},
        groupDetail(){
            if(this.type==2){
                this.radioChange()
            }
        },
		getList() {
			this.api.get('mailList/myChatGroup').then(res=>{
				if(res.data.state!='ok') return;
				// let userInfo = getApp().globalData.userInfo;
				// this.userType = userInfo.user_type
				// console.log(77, userInfo)
				let data = res.data;
				this.runChatGroup = data.runChatGroup || [];
			})
		},
        radioChange(info, type, id, userType){
            let index = this.chatGroupIds.indexOf(id)
			if(index!=-1){
				this.chatGroupIds.splice(index, 1)
			}else{
				this.chatGroupIds.push(id)
			}
			let obj = {
                chatGroupList: this.chatGroupIds,
                student: [],
                admin: []
            }
			let item = {id: info.id, type: info.type, name: info.name, qun: 1}
			this.$emit('selectIds', {}, item)
        },
	}
}
</script>
<style lang="less" scoped>
	.group-info{
		padding: 0 32rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		.name{
			margin-right: 30rpx;
			font-size: 28rpx;
		}
	}
	.logo{
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
	.tag{
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		border-radius: 10rpx;
	}
	.tag-bg1{
		background-color: #0000bf;
	}
	.tag-bg2{
		background-color: #f7931e;
	}
	.tag-bg3{
		background-color: #00ff00;
	}
	.tag-bg4{
		background-color: #02a7f0;
	}
    
	.no-group{
		margin-top: 100rpx;
		text-align: center;
		
	}
</style>